<template>
    <div class="container">
        <el-form :model="subject" :rules="rules" label-width="100px" class="hwForm">
            <el-form-item required label="班级" prop="classgradeId"> 
                <el-select v-model="subject.classgradeId" placeholder="班级" size="large" @change="getSubjectData">
                    <el-option
                        v-for="item in options.classgrades"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item :label="subjectTable.title" prop="title">
                <el-input style="width: 300px" v-model="subject.title" placeholder="请输入作业题目主题"></el-input>
            </el-form-item>
            <el-form-item :label="subjectTable.content" style="width: 70%;" prop="hwContent">
                <el-input
                    v-model="subject.content"
                    :rows="10"
                    type="textarea"
                    placeholder="Please input"
                />
            </el-form-item>
            <el-form-item required :label="subjectTable.file" prop="hwFiles">
                <!-- 取消自动上传 -->
                <el-upload
                    class="upload-demo"
                    action="#"
                    :limit="1"
                    :auto-upload="false"
                    :on-change="onChange"
                >
                    <el-button type="primary">Click to upload</el-button>
                    <template #tip>
                    <div class="el-upload__tip">
                        支持 xls 和 xlxs 文件
                    </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">立即发送</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { reactive,toRefs} from 'vue'
// import axios from '@/utils/axios'
export default {
    setup() {
        const dataMap = reactive({
            subjectTable: {
                number: "编号",
                title: "主题",
                content: "内容",
                file: "附件"
            },
            subject: {
                title: "",
                file: [],
                content: "",
                classgradeId: ""
            },
            options:{
                classgrades: [{}],
                subjects: [{}]
            },
            rules: {
                hwFiles: [
                { required: 'true', message: '请上传附件', trigger: ['change'] }
                ]
            }
        })
        return {
            ...toRefs(dataMap)
        }
    },
    methods: {
        submit() {
            let formData = new FormData();
            formData.append('userId',this.user.userId);
            formData.append('classgradeId',this.subject.classgradeId);
            formData.append('title',this.subject.title);
            formData.append('content',this.subject.content);
            if(this.subject.file != "")   formData.append('file',this.subject.file);
            
            console.log("*****************************")
            console.log(formData.get("file"))
            console.log("*****************************")

            this.$axios
                .post('teacher/subject/publish',formData)
                .then(response=> {
                    console.log(response)
                    this.subject = '',
                    this.$message.success("发布作业成功！")
                        
                })
                .catch(function (error){
                    console.log(error)
                })
                .then(function (){
                    console.log("测试成功")
                })
        },
        // 当文件列表发生改变时，获取文件内容
        onChange(file,files) {
            this.subject.file = files[0].raw
        },
        getClassgradeData(){
            this.$axios
                .get('teacher/class/basicinfo')
                .then(response=> {
                    this.options.classgrades = response.data
                    console.log(this.options.classgrades)
                })
                .catch(function (error){
                        console.log("发送请求失败：" + error)
                })
                .then(function (){
                    console.log("测试成功")
                })
        },
        personalInfo() {
            this.$axios
                .get("user/info")
                .then(response=> {
                    this.user = response.data
                })
                .catch(function (error){
                        console.log("发送请求失败：" + error)
                })
                .then(function (){
                    console.log("测试成功")
                })
        }
    },
    mounted() {
        this.getClassgradeData()
        this.personalInfo()
    }
}
</script>

<style scoped>
.container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.hwForm {
    width: 80%;
    height: 80%;
}
</style>
